<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">待安置客户：</text>
      <text class="customer-id">{{ customer.id }} </text>
      <text class="customer-name">【{{ customer.name }}】</text>
    </view>

    <!-- 自由滑落 -->
    <view class="option">
      <text class="option-title">自由滑落：</text>
      <switch :checked="isFreeFall" color="#a85ad8" @change="toggleFreeFall"></switch>
    </view>
    <view class="free-fall" v-if="isFreeFall">
      <picker @change="onPickerChange" :range="departments">
        <view class="picker">
          {{ selectedDepartment || "选择部门，自动滑落到该部门最左侧最低位" }}
        </view>
      </picker>
    </view>

    <!-- 手动安置 -->
    <view class="option">
      <text class="option-title">手动安置：</text>
      <switch :checked="!isFreeFall" color="#a85ad8" @change="toggleManual"></switch>
    </view>
    <view class="manual-input" v-if="!isFreeFall">
      <input class="input" placeholder="请输入安置人编号" v-model="manualCode" />
    </view>

    <!-- 确定按钮 -->
    <button class="submit-btn" @click="confirmPlacement">确定安置</button>

    <!-- 注意事项 -->
    <view class="notice">
      <text class="notice-title">注意事项：</text>
      <view class="notice-content">
        <view class="notice-item">1、两种安置方式同时只能选择1种</view>
        <view class="notice-item">2、自由滑落规则为该部门最左侧线，最低点位</view>
        <view class="notice-item">3、当足够明确安置位置时可直接输入编号手动安置</view>
        <view class="notice-item">4、安置后不可更改，请谨慎操作</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      customer: { id: "mz448020", name: "张青" }, // 客户信息
      isFreeFall: true, // 是否选中自由滑落
      selectedDepartment: "", // 选中的部门
      departments: ["销售部", "市场部", "技术部", "运营部"], // 部门列表
      manualCode: "", // 手动安置编号
    };
  },
  methods: {
    // 切换自由滑落
    toggleFreeFall(e) {
      this.isFreeFall = e.detail.value;
      this.manualCode = "";
    },
    // 切换手动安置
    toggleManual(e) {
      this.isFreeFall = !e.detail.value;
      this.selectedDepartment = "";
    },
    // 选择部门
    onPickerChange(e) {
      this.selectedDepartment = this.departments[e.detail.value];
    },
    // 确认安置
    confirmPlacement() {
      if (this.isFreeFall && !this.selectedDepartment) {
        uni.showToast({
          title: "请选择一个部门",
          icon: "none",
        });
        return;
      }
      if (!this.isFreeFall && !this.manualCode) {
        uni.showToast({
          title: "请输入安置人编号",
          icon: "none",
        });
        return;
      }
      uni.showToast({
        title: "安置成功！",
        icon: "success",
      });
    },
  },
};
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #f8f8f8;
  height: 100vh;
}
.header {
	display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    border: 2rpx solid #9e9e9e;
    border-radius: 10rpx;
    padding: 20rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    height: 60px;
}
.title {
  font-size: 28rpx;
  color: #333;
}
.customer-id {
  font-size: 28rpx;
  color: #a85ad8;
  margin-right: 10rpx;
}
.customer-name {
  font-size: 28rpx;
  color: #a85ad8;
}

/* 选项开关 */
.option {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.option-title {
  font-size: 28rpx;
  color: #333;
}

/* 自由滑落 */
.free-fall .picker {
  border: 1rpx solid #a85ad8;
  padding: 20rpx;
  font-size: 26rpx;
  color: #666;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

/* 手动安置输入框 */
.manual-input .input {
  border: 1rpx solid #ddd;
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

/* 提交按钮 */
.submit-btn {
  background-color: #a85ad8;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-top: 20rpx;
}

/* 注意事项 */
.notice {
  margin-top: 40rpx;
}
.notice-title {
	display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.notice-content {
  text-align: left;        /* 整体左对齐 */
  padding-left: 20rpx;     /* 左侧内边距 */
}
.notice-item {
  line-height: 1.8;        /* 增加行高 */
  font-size: 28rpx;        /* 字体大小 */
  color: #333;             /* 字体颜色 */
  margin-bottom: 10rpx;    /* 每项之间增加间距 */
}

</style>
